<template>
  <div class="home h100">
     <header>
        标题
     </header>
     <main>
        <router-view/>
     </main>
     <footer>
        <!-- router-link  必须要传递to -->
        <!-- tag (指定router-link 变成什么标签) -->

        <!-- 声明式跳转 -->
        <!-- exact 精准匹配 -->
        <!-- active-class  根据url添加类名 -->
        <router-link exact active-class="active" tag="span" to="/home">
            首页
        </router-link>
        <router-link exact active-class="active" tag="span" to="/home/one">
            列表
        </router-link>
        <router-link exact active-class="active" tag="span" to="/home/two">
            我的
        </router-link>
     </footer>
  </div>
</template>

<script>

export default {
}
</script>

<style>
.home {
    display: flex;
    flex-direction:column;
}

header {
    text-align: center;
    line-height: 46px;
}

main {
    flex: 1;
}

footer {
    text-align: center;
    line-height: 46px;
    display: flex;
}

footer span {
    flex: 1;
}
</style>
